<template>
    <view class="personal-info">
        <view class="avator">
            <tm-avatar :font-size="26" :round="12" linear="top" :label="userInfo.name"></tm-avatar>
            <tm-text class="ml-40" :font-size="32" color="#34345D" label="您好~以下为您的四柱"></tm-text>
        </view>
        <view class="info">
            <view>
                <tm-text class="mb-8" :font-size="28" color="#34345D"
                    :label="`${userInfo.name} ${GENDER[userInfo.gender]}`"></tm-text>
                <tm-text :font-size="28" color="#34345D" :label="lunarDateFormat"></tm-text>
            </view>
        </view>
<!--        <tm-text class="mt-24" :font-size="28" color="#34345D" :label="item.text"></tm-text>-->

        <zero-markdown-view :markdown="item.text"></zero-markdown-view>
        <view class="user-report" v-if="!item.me && item.finish">
            <UserReportButton @click="handleReportClick" />
        </view>
    </view>
</template>
<script setup lang="ts">
    import { ref, computed } from 'vue';
    import { useUserStore } from "@/stores/user";
    import { GENDER } from "@/enums/Enum"
    import dayjs from "dayjs";
    import { PluginLunar } from "dayjs-plugin-lunar";
    import UserReportButton from "../UserReportButton/UserReportButton.vue"
    dayjs.extend(PluginLunar);
    const userStore = useUserStore();

    const props = defineProps({
        item: {
            type: Object,
            default: () => ({})
        },
        finish: {
            type: Boolean,
            default: false
        }
    })

    const emit = defineEmits(['reportClick'])

    const handleReportClick = () => {
        emit('reportClick')
    }

    const userInfo = computed(() => {
        return userStore?.userInfo;
    })

    const lunarDateFormat = computed(() => {
        return dayjs(userInfo?.value.solarBirthday).format('LY年LMLD')
    })
</script>
<style lang="less" scoped>
    .personal-info {
        padding: 22rpx;
        background: linear-gradient(194deg, #C4EFEF 0%, #ABF5F3 33%, #D6E7FE 100%);
        box-shadow: inset 4rpx 4rpx 4rpx 0px rgba(145, 184, 184, 0.07);
        border-radius: 16rpx;
        border: 1px solid rgba(255, 255, 255, 0.78);

        .avator {
            display: flex;
            align-items: center;
        }

        .info {
            margin-top: 24rpx;
            background-color: rgba(255, 255, 255, 0.33);
            border-radius: 12rpx;
            padding: 26rpx;
        }

        .user-report {
            margin-top: 20rpx;
            display: flex;
            justify-content: start;
        }
    }
</style>
